<template>
  <div>
    <div class="radio-box" v-for="(item, index) in radios" :key="item.id">
      <span class="radio" :class="{ on: item.isChecked }"></span>
      <input
        v-model="radio"
        :value="item.value"
        class="input-radio"
        :checked="item.isChecked"
        @click="check(index)"
        type="radio"
      />{{ item.label }}
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      radio: "",
      radios: [
        {
          label: "男",
          value: "0",
          isChecked: true
        },
        {
          label: "女",
          value: "1",
          isChecked: false
        }
      ]
    };
  },
  methods: {
    check(index) {
      // 先取消所有选中项
      this.radios.forEach(item => {
        item.isChecked = false;
      });
      //再设置当前点击项选中
      this.radio = this.radios[index].value;
      // 设置值，以供传递
      this.radios[index].isChecked = true;
      console.log(this.radio);
    }
  }
};
</script>
<style lang="less" scoped>
.radio-box {
  display: inline-block;
  position: relative;
  height: 25px;
  line-height: 25px;
  margin-right: 5px;

  .radio {
    display: inline-block;
    width: 25px;
    height: 25px;
    vertical-align: middle;
    cursor: pointer;
    background-image: url(../../../assets/images/green-ball.png);
    background-repeat: no-repeat;
    background-position: 0 0;
  }
  .input-radio {
    display: inline-block;
    position: absolute;
    opacity: 0;
    width: 25px;
    height: 25px;
    cursor: pointer;
    left: 0px;
    outline: none;
    -webkit-appearance: none;
  }
  .on {
    background-position: -25px 0;
  }
}
</style>